<%--
  Created by IntelliJ IDEA.
  User: LnDamowang
  Date: 2018-12-10
  Time: 11:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="${pageContext.request.contextPath}/common/common.jsp" />
</head>
<script>
    function searcha() {
        //返回表格的 Options。
        var opts = $("#tb").bootstrapTable("getOptions") ;
        var limit = opts.pageSize ;
        var offset = (opts.pageNumber-1) * limit;
        var username = $("#username").val() ;
        $.post("${pageContext.request.contextPath}/members/querySearch",{'vipName':username,'limit':limit,'offset':offset},function (data) {
            // var mydata = eval("("+data+")") ;
            //重新绑定表格数据
            $("#tb").bootstrapTable('load',data) ;
            var elems = Array.prototype.slice.call(document.querySelectorAll('.abc'));
            elems.forEach(function(html) {
                var switchery = new Switchery(html);
            });
        })
    }
    $(function () {

       $("#tb").bootstrapTable({
           onLoadSuccess:function(data){
               var elems = Array.prototype.slice.call(document.querySelectorAll('.abc'));
               elems.forEach(function(html) {
                   var switchery = new Switchery(html);
               });
           },
           url:'${pageContext.request.contextPath}/members/querySearch',
           pagination:true,
           pageSize:2,
           pageList:[2,4,8,16],
           height:380,
           pageNumber:1,
           clickToSelect:true,
           sidePagination:'server',
           // //设置 true 将禁止多选。
           singleSelect:false,
           queryParams:function(params){
               var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                   limit: params.limit,  //页面大小
                   offset: params.offset, //页码
                   username:$("#username").val()
               };
               return temp;
           },
           columns:[
               {
                   checkbox:true
               },
               {
                   field:'vipId',
                   title:'会员卡号'
               },
               {
                   field:'vipName',
                   title:'会员名称'
               },
               {
                   field:'state',
                   title:'状态',
                   formatter:function (a,b,c) {
                       if (b.state==0){
                           return "<input disabled checked type='checkbox' class='abc js-switch'/>" ;
                       }
                       else{
                           return "<input disabled type='checkbox' class='abc js-switch'/>" ;
                       }
                   }
               },
               {
                   field:'sex',
                   title:'性别'
               },
               {
                   field:'integral',
                   title:'累计积分'
               },
               {
                   field:'amount',
                   title:'充值总金额'
               },
               {
                   field:'balance',
                   title:'余额'
               },
               {
                   field:'handleDate',
                   title:'开卡日期'
               },
               {
                   field:'eamil',
                   title:'邮箱'
               },
               {
                   title:'操作',
                   formatter:function(value,row,index){
                       if (row.state==0){
                           return "" +
                               "<button class='btn  btn-primary' onclick='chongzhi("+row.id+")'><span class='glyphicon glyphicon-edit'></span>&nbsp;充值</button>" +

                               "&nbsp;&nbsp;<button class='btn  btn-primary' onclick='toguashi(("+index+"))'><span class='glyphicon glyphicon-pencil'></span>&nbsp;挂失</button>"


                       }else {
                           return ""+
                               "<button class='btn  btn-primary' onclick='doqiyong("+row.id+")'><span class='glyphicon glyphicon-edit'></span>&nbsp;启用</button>"
                       }
                   }
               }
           ]
       });
    });
    function chongzhi(id) {
        $("#chongzhiModel")
    }
    function toadd() {
        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
        var options = $("#tb").bootstrapTable('getOptions');
        //得到当前页
        var pn = options.pageNumber;
        $("input[name='pn']").val(pn);
        var adminStr = "";
        $.post("${pageContext.request.contextPath}/user/query",function (data) {
            for (var i=0;i<data.length;i++){
                // alert(data[i].uname)
                adminStr+='<option value="'+data[i].uid+'">'+data[i].uname+'</option>';
            }
            $("#uName").html(adminStr);
        });
        $("#addModel").modal("show");
    }

    function doadd() {
        var formStr = $('#addform').serialize();
        //处理表单控件的中5文乱码
        params = decodeURIComponent(formStr, true);
        $.post("${pageContext.request.contextPath}/members/save",params,function (date) {
            $("#addform").modal("hide");
            $("#tb").bootstrapTable('load',date)
            var elems = Array.prototype.slice.call(document.querySelectorAll('.abc'));
            elems.forEach(function(html) {
                var switchery = new Switchery(html);
            });
        });
    }

    function toguashi(index) {
        //取消所有选择
        $("#tb").bootstrapTable("uncheckAll");
        //选中要修改的行
        $("#tb").bootstrapTable("check", index);
        //得到所选行的数据
        var row = $("#tb").bootstrapTable("getSelections")[0];
        //绑定主键u
        $("input[name='id']").val(row.id);
        //绑定当前页开始
        var options = $("#tb").bootstrapTable('getOptions') ;
        //得到当前页
        var pn = options.pageNumber ;
        //绑定当前页
        $("input[name='pn']").val(pn) ;
        $("input[name='email']").val(row.eamil);
        $("#guashi").modal("show");
    }
    function yz() {
        var id = $("input[name='id']").val();
        var yzm = $("input[name='yzm']").val();
        $.post("${pageContext.request.contextPath}/members/yz",{"yzm":yzm,"id":id},function (date) {
            if(date){
                $("#error").html('<span id="error" style="color: green;">√</span>')
                $("#yz").attr("onclick","doguashi()");
            }else {
                $("#error").html('<span id="error" style="color: red;">×</span>')
                $("#yz").attr("onclick","");
            }
        });
    }
    function doguashi() {
        var id = $("input[name='id']").val();
        var pn = $("input[name='pn']").val();
        $.post("${pageContext.request.contextPath}/members/guashi",{"pn":pn,"id":id},function (date) {
            $("#guashi").modal("hide");
            $("#tb").bootstrapTable('load',date)
            var elems = Array.prototype.slice.call(document.querySelectorAll('.abc'));
            elems.forEach(function(html) {
                var switchery = new Switchery(html);
            });
        });
    }
    function yanzhengma() {
        var params = $("#guashiForm").serialize();
        //处理表单控件的中文乱码
        params = decodeURIComponent(params,true);
        $.post("${pageContext.request.contextPath}/members/email",params,function (date) {
            // if(date==1) {
            //     swal("提示信息", "发送成功!", "success");
            // }else {
                     swal("提示信息", "发送成功!", "success");
            // }
        });
    }
    //充值
    function chongzhi(id) {
        //取消所有选择
        $("#tb").bootstrapTable("uncheckAll");
        $("input[name='id']").val(id);

        var options = $("#tb").bootstrapTable('getOptions');
        //得到当前页
        var pn = options.pageNumber;
        $("input[name='pn']").val(pn);
        $("#chongzhiModel").modal("show");
        $("#chongzhiModel").on("shown.bs.modal",function (){
            $('#czfrom').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    balance: {
                        message: 'The balance is not valid',
                        validators: {
                            notEmpty: {
                                message: '金额不能为空！'
                            },
                            stringLength: {
                                min: 2,
                                max: 10,
                                message: '请输入10元以上金额'
                            },
                            regexp: {
                                regexp: /^([0-9]+)$/,
                                message: '请输入正确金额'
                            }
                        }
                    },
                }
            });
        })
        // $("chongzhiMode")
    }
    function dochongzhi() {
        //启用较验
        $('#czfrom').data('bootstrapValidator').validate();
        //验证是否通过true/false
        var flag = $('#czfrom').data('bootstrapValidator').isValid();
        if(flag){ var balance = $("#balance1").val();
            var id =  $("input[name='id']").val();
            var pn = $("input[name='pn']").val();

            $.post("${pageContext.request.contextPath}/members/chongzhi",{"balance":balance,"id":id,"pn":pn},function (date) {
                //关闭对话框
                $("#chongzhiModel").modal('hide');
                //重新加载表格

                $("#tb").bootstrapTable('load',date);
                var elems = Array.prototype.slice.call(document.querySelectorAll('.abc'));
                elems.forEach(function(html) {
                    var switchery = new Switchery(html);
                });
                //提示增加成功
                swal("提示信息", "增加成功!", "success");
            } );
        }
    }

    // function qiyong(index) {
    //     //取消所有选择
    //     $("#tb").bootstrapTable("uncheckAll");
    //     //选中要修改的行
    //     $("#tb").bootstrapTable("check", index);
    //     //得到所选行的数据
    //     var row = $("#tb").bootstrapTable("getSelections")[0];
    //     //绑定主键u
    //     $("input[name='id']").val(row.id);
    //     //绑定当前页开始
    //     var options = $("#tb").bootstrapTable('getOptions') ;
    //     //得到当前页
    //     var pn = options.pageNumber ;
    //     //绑定当前页
    //     $("input[name='pn']").val(pn) ;
    //     $("input[name='email']").val(row.eamil);
    //     $("#qiyong").modal("show");
    // }

    <%--function qyyanzhengma() {--%>
        <%--var params = $("#qiyongform ").serialize();--%>
        <%--//处理表单控件的中文乱码--%>
        <%--params = decodeURIComponent(params,true);--%>
        <%--alert(params)--%>
        <%--$.post("${pageContext.request.contextPath}/members/email1",params,function (date) {--%>
            <%--// if(date==1) {--%>
            <%--//     swal("提示信息", "发送成功!", "success");--%>
            <%--// }else {--%>
            <%--swal("提示信息", "发送成功!", "success");--%>
            <%--// }--%>
        <%--});--%>
    <%--}--%>
    function doqiyong(id) {
        var options = $("#tb").bootstrapTable('getOptions') ;
        //得到当前页
        var pn = options.pageNumber ;
        $.post("${pageContext.request.contextPath}/members/doqiyong",{"pn":pn,"id":id},function (date) {
            alert(date)
            $("#qiyong").modal("hide");
            $("#tb").bootstrapTable('load',date)
            var elems = Array.prototype.slice.call(document.querySelectorAll('.abc'));
            elems.forEach(function(html) {
                var switchery = new Switchery(html);
            });
        });
    }
    <%--function qyyz() {--%>
        <%--var id = $("input[name='id']").val();--%>
        <%--var qyyzm1 = $("input[name='yzm1']").val();--%>
        <%--alert(qyyzm1)--%>
        <%--$.post("${pageContext.request.contextPath}/members/yz1",{"yzm":qyyzm1,"id":id},function (date) {--%>
            <%--if(date){--%>
                <%--$("#error1").html('<span id="error" style="color: green;">√</span>')--%>
                <%--$("#yz1").attr("onclick","doqiyong()");--%>
            <%--}else {--%>
                <%--$("#error").html('<span id="error" style="color: red;">×</span>')--%>
                <%--$("#yz1").attr("onclick","");--%>
            <%--}--%>
        <%--});--%>
    <%--}--%>
</script>
<body>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">会员信息查询</h3>
    </div>
    <div class="panel-body">


        <div class="row">
            <div class="col-sm-6"><button onclick="toadd()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;会员开户</button></div>
            <div class="col-sm-6">
                <form  class="form-inline pull-right">
                    <input id="username" type="text" class="form-control">
                    <button class="btn btn-primary" onclick="searcha()" type="button"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;搜索</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <table id="tb"></table>
            </div>
        </div>
    </div>
</div>

<%--添加--%>
<div class="modal fade" id="addModel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">会员开户</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal"id="addform">
                    <input type="hidden" name="pn">
                    <div class="form-group">
                        <label class="col-sm-4 text-right control-label" for="vipName">会员名称</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="vipName" id="vipName" placeholder="会员名称" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pwd" class="col-sm-4 text-right control-label">密码</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" id="pwd" name="pwd"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-4 text-right control-label">性别</label>
                        <div class="col-sm-6">
                            <div id="a" class="radio-inline" style="margin-top: -8px">
                                <input type="radio" value="男" name="sex"> 男
                            </div>

                            <div id="b" class="radio-inline" style="margin-top: -8px">
                                <input type="radio" value="女" name="sex"> 女
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="address" class="col-sm-4 text-right control-label">地址</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="address" name="address"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="vipPhone" class="col-sm-4 text-right control-label" >手机</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="vipPhone" name="vipPhone"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="balance" class="col-sm-4 text-right control-label">金额:</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="balance" name="balance"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="eamil" class="col-sm-4 text-right control-label">邮箱:</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="eamil" name="eamil"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="handleDate" class="col-sm-4 text-right control-label">开卡日期：</label>
                        <div class="col-sm-6">
                            <div class="input-group" id="datetimepicker1">
                                <input name="handleDate" type='text' id="handleDate" class="form-control" />
                                <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 text-right control-label">维修人员：</label>
                        <div class="col-sm-8">
                            <select name="operator" id="uName" class="form-control">
                                <%--<option value=""></option>--%>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="doadd()" class="btn btn-primary">开卡</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<%--挂失--%>
<div class="modal fade" id="guashi">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">挂失</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal"id="guashiForm">
                    <input type="hidden" name="pn">
                    <input type="hidden" name="id">
                    <input type="hidden" name="email">
                    <input type="hidden" name="yzm1">
                    <div class="form-group">
                        <label class="col-sm-4 text-right control-label" for="detail">挂失描述：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="detail" id="detail" placeholder="挂失描述" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right control-label" for="yzm">验证码：</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="yzm" id="yzm" onblur="yz()" placeholder="验证码" />


                        </div>
                        <span id="error"></span>
                        <button class='btn  btn-primary'  type="button" onclick="yanzhengma()"><span class="col-sm-4 glyphicon glyphicon-pencil"></span>发送验证码</button>

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id="yz" onclick="doguashi()" class="btn btn-primary">挂失</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="chongzhiModel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">金额充值</h4>
            </div>
            <div class="modal-body">
                <form action="" class="form-horizontal" id="czfrom">
                    <input type="hidden" name="id">
                    <input type="hidden" name="pn">
                    <div class="form-group">
                        <label class="col-sm-4 text-right  control-label" for="balance1">金额</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="balance1" name="balance"  placeholder="金额/请输入正确金额" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="dochongzhi()" class="btn btn-primary">充值</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="qiyong">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">启用</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal"id="qiyongform">
                    <input type="hidden" name="pn">
                    <input type="hidden" name="id">
                    <input type="hidden" name="email">
                    <div class="form-group">
                        <label class="col-sm-4 text-right control-label" for="qydetail">启用描述：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="detail" id="qydetail" placeholder="启用描述" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right control-label" for="yzm">验证码：</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="qyyzm1" id="yzm1" onblur="qyyz()" placeholder="验证码" />
                        </div>
                        <span id="error1"></span>
                        <button class='btn  btn-primary'  type="button" onclick="qyyanzhengma()"><span class="col-sm-4 glyphicon glyphicon-pencil"></span>发送验证码</button>

                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id="yz1" onclick="doqiyong()" class="btn btn-primary">启用</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
